<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>亮亮的网站</title>
  <link rel="stylesheet" href="./index.css">
</head>

<body>

  <div class="header">

    <div class="option">
      <ul class="choose">
        <li><a href="/">首页</a></li>
        <li><a href="/">生活</a></li>
        <li><a href="/">技术栈</a></li>
        <li><a href="/">留言板</a></li>
        <li><a href="https://github.com/MoMaek-f" target="_blank">GitHub</a> </li>
        <li> <a href="/">文件</a> </li>
        <li> <a href="/">关于</a> </li>
      </ul>
    </div>

    <div class="search">
      <input type="search" results="s" placeholder="🔍搜索本站"> </input>

    </div>

    <div class="login_register">
      <a href="">登录</a>|
      <a href="">注册</a>
    </div>

  </div>


  <div class="clock">
    <div class="clock-face">
      <div class="hand hour-hand"></div>
      <div class="hand min-hand"></div>
      <div class="hand second-hand"></div>
      <div class="circle"></div>
    </div>
  </div>

  <div class="context">
    <div class="context-box" onclick="alert('1')" style="cursor: pointer;">
      <div class="icon"> <img src="./imgage/1.jpg" alt=""></div>
      <div class="message">
        <div class="message-header">
          <div class="title">
            <a href="">这里是标题1部分</a>
          </div>
          <div class="content" style="width: 100%;overflow: auto">
            这里填写文章内容，
          </div>
        </div>
        <div class="message-footer">
          <div class="action-list">
            <ul class="action-lists">
              <li>
                <img src="./imgage/点赞.png" alt="">
              </li>
              <li>
                <img src="./imgage/踩.png" alt="">
              </li>
              <li>
                <img src="./imgage/评论.png" alt="">
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>

    <div class="context-box" onclick="alert('2')" style="cursor: pointer;">
      <div class="icon"> <img src="./imgage/2.jpg" alt=""></div>
      <div class="message">
        <div class="message-header">
          <div class="title">
            <a href="">这里是标题2部分</a>
          </div>
          <div class="content">
            <p>这里填写文章内容</p>
          </div>
        </div>
        <div class="message-footer">
          <div class="action-list">
            <ul class="action-lists">
              <li>
                <img src="./imgage/点赞.png" alt="">
              </li>
              <li>
                <img src="./imgage/踩.png" alt="">
              </li>
              <li>
                <img src="./imgage/评论.png" alt="">
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    
    </div>
    <div class="page-footer" align="center">

    <div class="beian" align="center">
      <noempty><a href="http://www.beian.miit.gov.cn" target="_blank">赣ICP备20001195号</a></noempty>
    </div>

  </div>
    <script src="./index.js"></script>
</body>

</html>